<template>
    <div
        class="header-container fixed top-0 left-0 bg-white common-shadow"
        :style="{ width: isCollapse ? '70px' : '250px' }"
    >
        <div class="flex-col h-full relative flex-items-box">
            <!-- 顶部 -->
            <template v-if="systemData">
                <div class="pl-14 pr-14 flex-items-box flex-col w-full mb-20">
                    <el-avatar shape="square" :size="isCollapse ? 50 : 90" :src="systemData.systemImgUrl" />
                    <!-- 收起时隐藏 -->
                    <template v-if="!isCollapse">
                        <span class="no-break mt-24 text-18 cursor-pointer" @click="goHome">{{ systemData.companyEntity }}</span>
                    </template>
                </div>
            </template>
            <!-- 中间导航 -->
            <div :style="{ width: isCollapse ? '100%' : 'calc(100% - 30px)' }" class="overflow-y-scroll">
                <el-menu
                    class="el-menu-vertical-demo"
                    :collapse="isCollapse"
                    unique-opened
                    :default-active="activeMenu"
                    router
                    background-color="transparent"
                    active-text-color="#FB7F30"
                    @select="handleSelect"
                >
                    <template v-for="(item, index) in menuList">
                        <!-- 多级菜单 -->
                        <template v-if="item.children">
                            <el-sub-menu :index="item.index" :key="index">
                                <!-- 一级菜单 -->
                                <template #title>
                                    <Icon :size="20" :name="item.icon"/>
                                    <span>{{ item.name }}</span>
                                </template>
                                <!-- 二级菜单 -->
                                <el-menu-item
                                    v-for="(children, childIndex) in item.children"
                                    :key="childIndex"
                                    :index="children.index"
                                >
                                    {{ children.name }}
                                </el-menu-item>
                            </el-sub-menu>
                        </template>
                        <!-- 普通菜单 -->
                        <template v-else>
                            <el-menu-item :index="item.index" :key="index">
                                <Icon :size="20" :name="item.icon"/>
                                <span>{{ item.name }}</span>
                            </el-menu-item>
                        </template>
                    </template>
                </el-menu>
                <!-- 展开收起 -->
                <!--                <div class="flex-center-box absolute bottom-0 left-0 w-full pt-20 pb-20 bg-white">-->
                <!--                    <Icon-->
                <!--                        @click="collapse"-->
                <!--                        class="cursor-pointer"-->
                <!--                        :size="20"-->
                <!--                        :name="isCollapse ? 'DArrowRight' : 'DArrowLeft'"-->
                <!--                    />-->
                <!--                </div>-->
            </div>
            <!-- 备案信息 -->
            <div class="w-full absolute bottom-12 flex-center-box text-12">
                <el-link type="info" href="https://beian.miit.gov.cn" target="_blank">蜀ICP备2023008463号-1</el-link>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { GlobalMitt, Storage } from '@utils/methods'
import { SystemInfo } from '@api/module/system'
import Icon from '@components/Icon/index.vue'

const route = useRoute()
const router = useRouter()

const systemData = ref<SystemInfo | null>(null)

/**
 * 刷新 systemInfo 信息
 * */
const refreshSystemInfo = () => {
    systemData.value = Storage.get('systemInfo')
}

refreshSystemInfo()

// 菜单参数
const props = withDefaults(defineProps<{
    menu: Array<any>
}>(), {
    menu: () => []
})
// 菜单列表
const menuList = computed(() => props.menu)
// 激活的菜单
const activeMenu = ref('')

// 收起展开状态
const isCollapse = ref(false)

/**
 * 初始化
 * 确保收起展开状态不被刷新影响
 * */
const init = () => {
    isCollapse.value = Boolean(Storage.get('isCollapse'))
    activeMenu.value = route.path
}
init()

// 更新时
watch(isCollapse, newVal => {
    Storage.set('isCollapse', newVal)
})

/**
 * 切换选项
 * */
const handleSelect = (key: string) => {
    activeMenu.value = key
}

// 更新 systemData 数据
GlobalMitt.on('refreshSystemInfo', refreshSystemInfo)

// 销毁事件
onUnmounted(() => {
    GlobalMitt.off('refreshSystemInfo')
})

// 回到首页
const goHome = () => {
    router.push('/')
    activeMenu.value = ''
}

// 点击收缩触发图表刷新
// const collapse = () => {
//     isCollapse.value = !isCollapse.value
// }
</script>

<style lang="less" scoped>
.header-container{
    transition: all 0.3s;
    height: 100vh;
    padding-top: 60px;
    z-index: 20;

    .el-link {
        font-size: 12px;
    }

    .el-avatar{
        flex-shrink: 0;
        background: white;
    }

    .el-menu-item:hover{
        @apply rounded-14;
    }

    .el-menu-item{
        @apply rounded-14;
    }

    .no-break{
        word-break: keep-all;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 100%;
    }

    .el-menu{
        transition: all 1ms;
        @apply border-none mt-42;

        ul {
            .is-active{
                @apply rounded-14;
                background: rgba(251, 127, 48, 0.2);
            }
        }
    }
}

</style>
